<template>
  <div class="warning-table">

    <div class="warning-table-th warning-common">
      <div class="warning-table-time left">时间</div>
      <div class="warning-table-position left">位置</div>
      <div class="warning-table-event left">事件</div>
      <div class="warning-table-drive left">人员/司机</div>
    </div>

    <div
      class="t-center mt20"
      v-show="errorList.length === 0 && normalList.length === 0">暂无事件</div>

    <div class="warning-table-scroll" ref="warningTable">
      <div>
        <div
          class="warning-table-error warning-common"
          :style="{
            transform: `translateY(${item.translateY}px)`,
            msTransform: `translateY(${item.translateY}px)`,
          }"
          :class="{'warning-table-warning': item.status === 2}"
          :key="`${index}_error`"
          v-for="(item, index) in errorList" >
          <div class="warning-table-time left">{{item.momentTime ||  '--'}}</div>
          <div class="warning-table-position left">{{item.location ||  '--'}}</div>
          <div class="warning-table-event left">{{item.event ||  '--'}}</div>
          <div class="warning-table-drive left">{{item.person ||  '--'}}</div>
        </div>
      </div>
      <div>
        <div
          v-if="normalList.length > 0"
          class="warning-common"
          :class="{'warning-table-normal': item.status === 1, 'warning-table-warning': item.status === 6, 'warning-scroll-error': item.status === 5}"
          :key="`${index}_normal`"
          :style="{
            transform: `translateY(${item.translateY}px)`,
            msTransform: `translateY(${item.translateY}px)`,
          }"
          v-for="(item, index) in normalList">
          <div class="warning-table-time left">{{item.momentTime ||  '--'}}</div>
          <div class="warning-table-position left">{{item.location ||  '--'}}</div>
          <div class="warning-table-event left">{{item.event ||  '--'}}</div>
          <div class="warning-table-drive left">{{item.person ||  '--'}}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'broadcast',
    data () {
      return {
        normalInterval: null,
        errorInterval: null,
        errorList: [],
        errorListJson: new Map(),
        normalList: [],
        normalListJson: new Set()
      }
    },
    mounted () {
      this.getScreeRealTimeInit()
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser',
        incomingProjectBroadcastNode: 'incomingProjectBroadcastNode'
      })
    },
    activated () {
      this.initData()
    },
    watch: {
      incomingProjectBroadcastNode (item) {
        if (this.$route.name === 'projectVideo') {
          this.incomingProjectNode(item)
        }
      },
      currentUser () {
        if (this.currentUser.mid && this.$route.name === 'projectVideo') {
          this.initData()
        }
      }
    },
    methods: {
      initData () {
        window.clearInterval(this.normalInterval)
        window.clearInterval(this.errorInterval)
        this.normalList = []
        this.normalListJson.clear()
        this.errorList = []
        this.errorListJson.clear()
        this.normalInterval = null
        this.errorInterval = null
        this.getScreeRealTimeInit()
        this.normalInterval = this.initInterval(this.normalListJson, this.normalList)
      },
      getScreeRealTimeInit () {
        const data = {
          'stageId': this.currentUser.stageId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/screen/getScreeRealTimeInit`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          res.data.data.forEach(item => {
            this.incomingProjectNode(item)
          })
        })
      },
      incomingProjectNode (item) {
        let obj = {...item, ...{translateY: 105, movePx: 0, status: 1}}
        obj.momentTime = this.$moment(Number.parseInt(obj.time)).format('HH:mm')
        switch (item.type) {
          // 塔机开机
          case 1:
            obj.status = 1
            break
          // 塔吊关机
          case 2:
            obj.status = 1
            break
          // 升降机开机
          case 3:
            obj.status = 1
            break
          // 升降机关机
          case 4:
            obj.status = 1
            break
          // 塔机吊次
          case 5:
            obj.status = 1
            break
          // 升降机运次
          case 6:
            obj.status = 1
            break
          // 访客到访
          case 7:
            obj.status = 1
            break
          // 视频监控-未带安全帽
          case 8:
            obj.status = 6
            break
          // 视频监控-明火报警
          case 9:
            obj.status = 5
            break
          // 视频监控-烟雾报警
          case 10:
            obj.status = 5
            break
          // 视频监控-非法闯入
          case 11:
            obj.status = 6
            break
          // 视频监控-人员聚集
          case 12:
            obj.status = 6
            break
          // 塔机预警
          case 13:
            obj.status = 2
            break
          // 塔机报警
          case 14:
            obj.status = 3
            break
          // 升降机预警
          case 15:
            obj.status = 2
            break
          // 升降机报警
          case 16:
            obj.status = 3
            break
          // 环境预警
          case 17:
            obj.status = 2
            break
          // 环境报警
          case 18:
            obj.status = 3
            break
          // 人员入场
          case 19:
            obj.status = 1
            break
          // 人员出场
          case 20:
            obj.status = 1
            break
          // 报警消失
          case 21:
            obj.status = 4
            break
          // 报警消失
          case 22:
            obj.status = 4
            break
          // 报警消失
          case 23:
            obj.status = 4
            break
        }
        /*
        * status 消息状态
        * 1 普通消息
        * 2 预警消息
        * 3 报警消息
        * 4 取消报警
        * 5 视屏监控报警 滚动 不固定
        * 6 视屏监控预警 滚动 不固定
        * */
        if (obj.status === 3 || obj.status === 2) {
          // 页面是否已经有相同的事件
          if (!this.errorListJson.has(`${obj.referId}_${obj.event}`)) {
            if (this.errorListJson.size >= 3) {
              if (this.errorListJson.size === 3) {
                [...this.errorListJson.values()].forEach(item => {
                  item.translateY = 105
                })
                this.errorList = [[...this.errorListJson.values()][0]]
                this.normalList = []
              }
              this.errorListJson.set(`${obj.referId}_${obj.event}`, obj)
              window.clearInterval(this.normalInterval)
              this.normalInterval = null
              if (!this.errorInterval) {
                this.errorInterval = this.initInterval(this.errorListJson, this.errorList, true)
              }
            } else {
              this.errorList.push(obj)
              this.errorList.sort(this.compare('status'))
              this.errorList.forEach((item, index) => {
                item.translateY = index * 36
              })
              this.errorListJson.set(`${obj.referId}_${obj.event}`, obj)
            }
            let afterTime = this.$moment(Number.parseInt(obj.time)).add(60, 'minutes').valueOf()
            let time = afterTime - this.$moment().valueOf()
            setTimeout(() => {
              this.delError(obj)
            }, time)
          }
        } else if (obj.status === 4) {
          this.delError(obj)
        } else {
          if (this.normalList.length === 0) {
            this.normalList.push(obj)
          }
          if (this.normalListJson.size > 100) {
            let index = 0
            for (let notmalItem of this.normalListJson) {
              index++
              if (index === 2) {
                break
              }
              this.normalListJson.delete(notmalItem)
            }
          }
          this.normalListJson.add(obj)
          let afterTime = this.$moment(Number.parseInt(obj.time)).add(60, 'minutes').valueOf()
          let time = afterTime - this.$moment().valueOf()
          setTimeout(() => {
            this.normalListJson.delete(obj)
          }, time)
          if (!this.normalInterval) {
            this.normalInterval = this.initInterval(this.normalListJson, this.normalList)
          }
        }
      },
      compare (property) {
        return function (a, b) {
          return Number.parseInt(b[property]) - Number.parseInt(a[property])
        }
      },
      delError (obj) {
        this.errorList.forEach((item, index) => {
          if (item) {
            if (item.referId === obj.referId && item.event === obj.event) {
              this.errorList.splice(index, 1)
            }
          }
        })
        this.errorListJson.delete(`${obj.referId}_${obj.event}`)
        if (this.errorListJson.size <= 3) {
          window.clearInterval(this.errorInterval)
          this.errorInterval = null
          this.errorList.forEach((item, index) => {
            item.translateY = index * 36
          })
          if (this.normalList.length === 0 && this.normalListJson.size > 0) {
            this.normalList.push([...this.normalListJson.values()][0])
          }
          if (!this.normalInterval) {
            this.normalInterval = this.initInterval(this.normalListJson, this.normalList)
          }
        }
      },
      initInterval (listJson, list, warning = false) {
        let index = 1
        return setInterval(() => {
          let sourceIndex = listJson.size
          list.forEach((item, i) => {
            if (item) {
              let length = list.length
              item.translateY--
              item.movePx++
              if (length < 4 && item.movePx === 36) {
                if (index === sourceIndex) {
                  index = 0
                }
                let warningList = [...listJson.values()]
                let arr = warningList.sort(this.compare('time'))
                if (warning) {
                  arr = warningList.sort(this.compare('status'))
                }
                list.push(arr[index])
                index++
              }
              if (item.translateY <= -36) {
                item.translateY = 105
                item.movePx = 0
                list.splice(i, 1)
              }
            }
          })
        }, 60)
      }
    }
  }
</script>

<style scoped lang='scss'>
  .warning-table{
    margin-top: 10px;
    width: 100%;
    height: 140px;
    border: 1px rgba(8, 63, 81, 0.8) solid;
    .warning-common{
      width: 422px;
      height: 36px;
      padding: 10px 12px;
      box-sizing: border-box;
      border-bottom: 1px rgba(8, 63, 81, 0.8) solid;
      position: absolute;
      .warning-table-time{
        width: 60px;
      }
      .warning-table-position{
        width: 150px;
      }
      .warning-table-event{
        width: 120px;
      }
      .warning-table-drive{
        width: 65px;
      }
    }
    .warning-table-th{
      width: 422px;
      background: #0b2e44;
      color: #e2e2e2;
    }
    .warning-table-error{
      color: #fd0202;
      background: #092436;
      z-index: 3;
    }
    .warning-table-warning{
      color: #fec601;
      background: #092436;
      z-index: 2;
    }
    .warning-scroll-error{
      color: #fd0202;
      background: #092436;
      z-index: 2;
    }
    .warning-table-normal{
      color: #a9c5ec;
    }
    .warning-table-scroll{
      height: 105px;
      overflow: hidden;
      position: relative;
      margin-top: 35px;
    }
  }
</style>
